<template>
  <div class="main-content">
    <div class="personalData">
      <div class="personalData-top">
        <i></i>
        <span>完善信息赠送积分，生日当天消费积分翻倍</span>
      </div>
      <div class="personalData-form">
        <el-form :model="form" label-width="120px">
          <!--上传图片-->
          <div>
            <div class="personalData-form-text"><span>*</span>上传头像</div>
            <div class="personalData-form-file">
              <div for="file"><img :src="form.pic"></div>
              <el-upload
                  class="avatar-uploader"
                  action="http://47.110.139.43/api/upload"
                  :show-file-list="false"
                  :data="data.ID"
                  :on-change="forward"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  id="file"
                  v-model="form.pic">
              </el-upload>
<!--              <input type="file" id="file" v-model="form.pic" name="pic"/>-->
            </div>
          </div>
          <!--昵称-->
          <div>
            <div class="personalData-form-text"><span>*</span>昵称</div>
            <div class="personalData-form-inp">
              <el-input @blur="nicknameBlue" v-model.trim="form.nickname" placeholder="请输入昵称" />
              <div class="msg" v-show="data.nicknameFlag">
                <span>{{data.nicknameMsg}}</span>
              </div>
            </div>
          </div>
          <!--性别-->
          <div>
            <div class="personalData-form-text"><span>*</span>性别</div>
            <div class="personalData-form-inp">
              <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </div>
          </div>
          <!--生日-->
          <div>
            <div class="personalData-form-text">生日</div>
            <div class="personalData-form-inp el-form-item-inp">
              <el-select @change="year" v-model="form.birthdayYear" placeholder="请选择年份">
                <el-option v-for="item in data.birthdayYear" :key="item" :label="item.year" :value="item.year" />
              </el-select>
              <el-select @change="month" v-model="form.birthdayMonth" placeholder="请选择月份">
                <el-option v-for="item in data.birthdayMonth" :key="item" :label="item.month" :value="item.month" />
              </el-select>
              <el-select v-model="form.birthdayDay" placeholder="请选择日期">
                <el-option v-for="item in data.birthdayDay" :key="item" :label="item.day" :value="item.day" />
              </el-select>
            </div>
          </div>
          <!--绑定手机-->
<!--          <div>-->
<!--            <div class="personalData-form-text">绑定手机<i></i></div>-->
<!--            <div class="personalData-form-inp">-->
<!--              <el-input v-model="form.phone" disabled placeholder="" />-->
<!--              <div class="alter" @click="alter">-->
<!--                <el-icon><Edit  style="font-size:14px;position: relative;top: 1px;" /></el-icon>-->
<!--                <span>修改</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
          <!--绑定邮箱-->
          <div>
            <div class="personalData-form-text"><span>*</span>绑定邮箱</div>
            <div class="personalData-form-inp">
              <el-input @blur="emailBlur" v-model.trim="form.email" placeholder="请输入邮箱" />
              <div class="msg" v-show="data.emailFlag">
                <span>{{data.emailMsg}}</span>
              </div>
            </div>
          </div>
          <!--居住地-->
          <div>
            <div class="personalData-form-text"><span>*</span>居住地</div>
            <div class="personalData-form-inp el-form-item-inp">
              <el-select @change="province" v-model="form.province" placeholder="请选择">
                <el-option v-for="(item,index) in data.province" :key="item.name" :label="item.name" :value="item.name" />
              </el-select>
              <el-select @change="city" v-model="form.city" placeholder="请选择">
                <el-option v-for="item in data.city" :key="item.name" :label="item.name" :value="item.name" />
              </el-select>
              <el-select v-model="form.district" placeholder="请选择">
                <el-option v-for="item in data.district" :label="item" :value="item" />
              </el-select>
            </div>
          </div>
          <!--职业-->
          <div>
            <div class="personalData-form-text"><span>*</span>职业</div>
            <div class="personalData-form-inp">
              <el-select v-model="form.occupation " placeholder="请选择您的职业">
                <el-option v-for="item in data.occupation" :label="item.content" :value="item.content" />
              </el-select>
            </div>
          </div>
          <!--提交-->
          <div  style="margin-top: 20px;">
            <el-button @click="onSubmit">确定</el-button>
          </div>
        </el-form>
        <div class="mask" v-show="data.flag">
          <div class="mask-content">
            <div class="mask-content-body">
              <el-form :model="formPhone" label-width="120px">
                <div class="close">
                  <el-icon @click="close"><Close /></el-icon>
                </div>
                <div>
                  <h3>绑定手机</h3>
                </div>
                <!--收件人-->
                <div>
                  <p>为了确认您的本人操作，需要对您进行身份验证</p>
                  <p>已绑定手机号：{{form.phone}}</p>
                </div>
                <!--手机号-->
                <div>
                  <div class="phone">
                    <el-input @blur="phoneBlue" v-model.number="formPhone.newPhone" placeholder="请输入短信验证码" />
                    <el-button>获取验证码</el-button>
                  </div>
                  <div v-show="data.phoneFlag" class="hint">
                    <span>{{data.phoneMsg}}</span>
                  </div>
                </div>
                <!--确定-->
                <div class="confirm">
                  <el-button :plain="true" @click="onPhone">确定</el-button>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref, getCurrentInstance} from 'vue';
import { ElMessage } from 'element-plus';
const { proxy } = getCurrentInstance();
import store from "../../../store";
//form表单提交数据
let formPhone = reactive({
  //新手机号
  newPhone:''
})
let form = reactive({
  //图片
  pic:'',
  //昵称
  nickname:'',
  //性别
  sex: '',
  //生日年份
  birthdayYear: '',
  birthdayMonth:'',
  birthdayDay:'',
  //绑定手机
  phone:'',
  //绑定邮箱
  email:'',
  //省市区
  province:'',
  //市
  city:'',
  //区
  district:'',
  //职业
  occupation:'',
})
//data数据
let data = reactive({
  //用户ID
  ID:{id:''},
  //图片地址
  pic:'',
  //职业
  occupation:[
    {
      id:0,
      content:'请选择',
    },
    {
      id:1,
      content:'IT/互联网/通信/电商',
    },
    {
      id:2,
      content:'会计/金融/银行/保险',
    },
    {
      id:3,
      content:'生产/营运/采购/物流',
    },
    {
      id:4,
      content:'生物/制药/化工/医疗',
    },
    {
      id:5,
      content:'广告/市场/媒体/艺术',
    },
    {
      id:6,
      content:'建筑/房地产',
    },
    {
      id:7,
      content:'销售/客服',
    },
    {
      id:8,
      content:'人事/行政/高级管理',
    },
    {
      id:9,
      content:'教育/培训/法律/科研',
    },
    {
      id:10,
      content:'管理人员/政府机构',
    },
    {
      id:11,
      content:'全日制学生',
    },
    {
      id:12,
      content:'其他行业',
    },
  ],
  //年月日
  birthdayYear:[],
  birthdayMonth:[],
  birthdayDay:[],
  //是否显示
  dayFlag:false,
  //省市下标
  provinceIndex:'',
  cityIndex:'',
  //省市区
  province : [],
  city:[],
  district:[],
  //提示
  emailMsg:'请输入邮箱',
  emailFlag:false,
  nicknameMsg:'请输入昵称',
  nicknameFlag:false,
  flag:false,
  phoneFlag:'',
  phoneMsg:''
})
//短信验证
let phoneBlue = ()=>{
  if (formPhone.newPhone===''){
    data.phoneFlag = true
    data.phoneMsg = '短信验证码不能为空'
  }else if (formPhone.newPhone.toString().length!==6) {
    data.phoneFlag = true
    data.phoneMsg = '短信验证码为6个字符'
  }else {
    data.phoneFlag = false
  }
};
//关闭
let close = ()=>{
  data.flag = false;
  formPhone.newPhone = '';
}
//确定关闭
let onPhone = ()=>{
  data.flag = false;
  formPhone.newPhone = '';
}
//昵称失去焦点
let nicknameBlue = ()=>{
  if (form.nickname===''){
    data.nicknameFlag = true;
    data.nicknameMsg = '请输入昵称';
  }else if (form.nickname.length<2||form.nickname.length>11){
    data.nicknameFlag = true;
    data.nicknameMsg = '昵称为2-11位';
  } else {
    data.nicknameFlag = false;
  }
}
//邮箱失去焦点
let emailBlur = ()=>{
  if (form.email===''){
    data.emailFlag = true;
    data.emailMsg = '请输入邮箱';
    //正则
  }else if (/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ig.test(form.email)){
    data.emailFlag = false;
  }else if (/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ig.test(form.email)===false){
    data.emailFlag = true;
    data.emailMsg = '邮箱格式错误';
  }
}
//年份
const year = ()=>{
  data.birthdayMonth = [];
  //遍历12个月份
  for(let i = 1;i < 13;i++){
    let obj = {
      month: i
    }
    data.birthdayMonth.push(obj);
  }
  form.birthdayMonth = '';
  form.birthdayDay = '';
}
//月份
const month = ()=>{
  //判断是否是闰年
  if ((form.birthdayYear % 4 === 0 && form.birthdayYear % 100 !== 0) || form.birthdayYear % 400 === 0){
    data.dayFlag = true;
  }else {
    data.dayFlag = false;
  }
  //数组接受
  data.birthdayDay = [];
  //判断月份
  switch (form.birthdayMonth) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
      for (let i = 1; i < 32; i++) {
        let obj = {
          day: i
        }
        data.birthdayDay.push(obj);
      }
      break;
    case 2:
      if (data.dayFlag){
        for (let i = 1; i < 30; i++) {
          let obj = {
            day: i
          }
          data.birthdayDay.push(obj);
        }
      }else {
        for (let i = 1; i < 29; i++) {
          let obj = {
            day: i
          }
          data.birthdayDay.push(obj);
        }
      }
      break;
    case 4:
    case 6:
    case 9:
    case 11:
      for (let i = 1; i < 31; i++) {
        let obj = {
          day: i
        }
        data.birthdayDay.push(obj);
      }
      break;
  }
  form.birthdayDay = '';
}
//地址三级联动
let province = ()=>{
  //获取当前市的下标
  let i = data.province.findIndex((item,index)=>{
    return item.name === form.province
  })
  data.provinceIndex = i;
  data.city=data.province[data.provinceIndex].city;
  form.city='';
  form.district = '';
}
//城市
let city = ()=>{
  //获取区的下标
  let i = data.city.findIndex((item,index)=>{
    return item.name === form.city
  })
  data.cityIndex = i;
  data.district = data.city[data.cityIndex].districtAndCounty;
  form.district = '';
}
//提交
const onSubmit = () => {
  //判断是否为空
  if (form.nickname===''||form.sex===''||form.email===''||form.province===''||form.city===''||form.district===''||form.occupation===''){
    ElMessage.error('带*的为必填内容，不能为空')
  }else if (data.emailFlag){
    ElMessage.error('邮箱格式错误')
  }else if(data.nicknameFlag){
    ElMessage.error('昵称格式错误')
  } else {
    let obj = form;
    let code = 200;
    // console.log(obj);
    proxy.$get("/api/personalData/personalData", {...obj,code})
        .then((date)=>{
          //获取里面的对象
          date = date[0];
          //赋值给前端
          form.pic = date.headPortrait;
          form.nickname = date.nickname;
          form.sex = date.gender;
          form.birthdayYear = date.birthdayYear;
          form.birthdayMonth = date.birthdayMonth;
          form.birthdayDay = date.birthdayDay;
          form.phone = date.mobilePhone;
          form.email = date.email;
          form.province = date.province;
          form.city = date.city;
          form.district = date.district;
          form.occupation = date.occupation;
          //提示
          ElMessage({
            message: '修改完成',
            type: 'success',
          })
          // 修改完昵称更新vuex
          store.commit('preservation',date.nickname);
        })
  }
};
//上传图片
//上传后
const forward = ()=>{
  //发送请求切换图片
  proxy.$get('/api/PersonalCenter/pic',{})
      .then((date)=>{
        form.pic=date[0].oldPapers;
      })
}
//上传成功
const handleAvatarSuccess = (
    response,
    uploadFile
) => {
  form.pic = URL.createObjectURL(uploadFile.raw);
}
//上传前
const beforeAvatarUpload = (rawFile) => {
  let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/bmp', 'image/png','image/webp'];
  const isImage = types.includes(rawFile.type);
  if (!isImage) {
    ElMessage.error('图片类型必须是.gif,jpeg,jpg,png,bmp,webp中的一种')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能大于2M')
    return false
  }
  return true
}
//
let alter = ()=>{
  data.flag = true;
}
//默认循环年份
onMounted(()=>{
  //获取vuex中的地址
  data.province = store.state.province;
  //发送get请求 获取数据库数据
  proxy.$get("/api/personalData/personalData", {})
      .then((date)=>{
        // console.log(date[0]);
        //获取里面的对象
        date = date[0];
        //赋值给前端
        data.ID.id = date.id;
        form.pic = date.headPortrait;
        form.nickname = date.nickname;
        form.sex = date.gender;
        form.birthdayYear = date.birthdayYear;
        form.birthdayMonth = date.birthdayMonth;
        form.birthdayDay = date.birthdayDay;
        form.phone = date.mobilePhone;
        form.email = date.email;
        form.province = date.province;
        form.city = date.city;
        form.district = date.district;
        form.occupation = date.occupation;
      })
  //循环年份
  for(let i = 2022;i > 1962;i--){
    let obj = {
      year: i
    }
    data.birthdayYear.push(obj);
  }
  //年份
  year();
  //月份
  month()
  //遍历地址
  setTimeout(()=>{
    //
    let p = data.province.findIndex((item,index)=>{
      return item.name === form.province;
    })
    data.provinceIndex = p;
    data.city=data.province[data.provinceIndex].city;
    //
    let c = data.city.findIndex((item,index)=>{
      return item.name === form.city;
    })
    data.cityIndex = c;
    data.district = data.city[data.cityIndex].districtAndCounty;
  },200)
});
</script>

<style lang="less" scoped>
.main-content {
  width: 1034px;
  .personalData {
    box-shadow: 0 0 10px 0 #eaeaea;
    padding: 35px 50px;
    min-height: 100%;
    .personalData-top {
      color: #0096d6;
      padding-bottom: 29px;
      border-bottom: 1px solid #e0e0e0;
      span {
        font-size: 16px;
      }
    }
    .personalData-form {
      .mask {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0,0,0,.6);
        z-index: 999;
        //display: none;
        .mask-content {
          max-width: 680px;
          min-width: 440px;
          padding: 40px 54px;
          position: absolute;
          left: 50%;
          top: 50%;
          background: #fff;
          border-radius: 2px;
          transform: translate(-50%,-50%);
          text-align: center;
          .mask-content-body {
            width: 100%;
            background: #fff;
            border-radius: 2px;
            text-align: center;
            font-size: 14px;
            .phone {
              display: flex;
              justify-content: center;
              align-items: center;
              .el-button {
                width: 160px;
                margin-left: 20px
              }
              .el-input {
                width: 100%;
              }
            }
            div {
              position: relative;
              margin: 10px 0;
              .el-input {
                height: 50px;
              }
              h3 {
                padding: 0;
                margin-bottom: 40px;
                font-size: 22px;
              }
              .personalData-form-inp {
                .el-input {
                  height: 50px;
                }
                input {
                  width: 100%;
                  height: 50px;
                  padding: 0 25px;
                  box-sizing: border-box;
                  background-color: #fff;
                  border-radius: 4px;
                  border: 1px solid #dcdfe6;
                }
                .el-select {
                  width: 165px;
                  /deep/ .el-input__inner {
                    height: 50px;
                  }
                }
              }
              .el-form-item-inp {
                display: flex;
                justify-content: space-between;
              }
            }
            .hint {
              position: absolute;
              bottom: -15px;
              span {
                text-align: left;
                color: red;
                font-size: 12px;
              }
            }
            .confirm {
              display: flex;
              justify-content: start;
              /deep/ .el-button {
                width: 100%;
                height: 50px;
              }
            }
            .close {
              /deep/ .el-icon {
                position: absolute;
                right: -42px;
                top: -36px;
                font-size: 34px;
                color: #909399;
                cursor: pointer;
              }
            }
            .default {
              display: flex;
              justify-content: start;
            }
            .example-block {
              display: flex;
              justify-content: start;
              /deep/ .el-cascader {
                width: 100%;
                /deep/ input {
                  height: 50px;
                }
              }
            }
          }
        }
      }
      .personalData-form-text {
        line-height: 1;
        padding-top: 30px;
        padding-bottom: 30px;
        span {
          color: #f56c6c;
          margin-right: 4px;
        }
      }
      .personalData-form-file {
        position: relative;
        lable {
          display: block;
          height: 100%
        }
        #file {
          position: absolute;
          width: 100px;
          height: 100px;
          top: 0;
          /deep/.el-upload {
            width: 100px;
            height: 100px;
          }
        }
        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
        /deep/ .el-input {
          position: absolute;
          left: 0;
          top: 0px;
          opacity: 0;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          input {
            position: absolute;
            left: 0;
            top: 0px;
            opacity: 0;
            width: 100px;
            height: 100px;
            border-radius: 50%;
          }
        }
      }
      .personalData-form-inp {
        position: relative;
        .el-input {
          height: 50px;
        }
        .alter {
          position: absolute;
          right: 37px;
          top: 50%;
          transform: translateY(-49%);
          color: #0096d6;
          font-size: 14px;
          cursor: pointer;
          display: flex;
          align-items: center;
          span {
            margin-left: 7px;
          }
        }
        .msg {
          position: absolute;
          bottom: -20px;
          span {
            text-align: left;
            color: red;
            font-size: 12px;
          }
        }
        input {
          width: 100%;
          height: 50px;
          padding: 0 25px;
          box-sizing: border-box;
          background-color: #fff;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
        }
        .el-select {
          /deep/ .el-input__inner {
            height: 50px;
          }
        }
      }
      .el-form-item-inp {
        display: flex;
        justify-content: space-between;
      }
      .el-button {
        width: 270px;
        height: 50px;
        //background: #fff;
        //border: 1px solid #ccc;
        //color: #000;
        margin: 15px 0;
      }
    }
  }
}
</style>